<template>
  <view style="padding: 24rpx;">
    <view class="form">
      <view class="form-item" style="border-bottom: 1px solid #f5f5f5;">
        <view class="form-item-left">券包数量</view>
        <view class="form-item-right">
          <input :disabled="stock" type="number" placeholder="请输入券包数量" v-model="stock" />
        </view>
      </view>
      <view class="form-item" style="border-bottom: 1px solid #f5f5f5;">
        <view class="form-item-left">兑换人姓名</view>
        <view class="form-item-right">
          <input type="text" placeholder="请输入兑换人姓名" v-model="sign_name" />
        </view>
      </view>
      <view class="form-item" style="border-bottom: 1px solid #f5f5f5;">
        <view class="form-item-left">兑换人电话</view>
        <view class="form-item-right">
          <input type="tel" placeholder="请输入兑换人电话" v-model="sign_mobile" />
        </view>
      </view>
      <view class="form-item" style="border-bottom: 1px solid #f5f5f5;">
        <view class="form-item-left">购买方式</view>
        <view class="form-item-right">
          <picker style="flex: 1" @change="payChange" :range="pay_array" :range-key="'label'">
            <text>{{ pay_array[pay_index].label }}</text>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <view class="form-item-left">券包价格</view>
        <view class="form-item-right">¥<text
            style="margin: 0 10rpx;font-size: 30rpx;color: #FF3D00;">{{ qian_num(couponObj.price) }}</text>元/个</view>
      </view>
      <view class="form-item">
        <view class="form-item-left">每次返还</view>
        <view class="form-item-right">¥{{couponObj.per_bonus}}元/个</view>
      </view>
      <view class="form-item">
        <view class="form-item-left">返还周期</view>
        <view class="form-item-right">1{{couponObj.day == 30 ? '月' :'天'}}/次</view>
      </view>
      <view class="form-item">
        <view class="form-item-left">有效时长</view>
        <view class="form-item-right">
          {{couponObj.day == 30 ? parseInt(couponObj.sign_day) / 30 :couponObj.sign_day}}{{couponObj.day == 30 ? '月' :'天'}}
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-left">总收益</view>
        <view class="form-item-right">¥<text
            style="margin: 0 10rpx;font-size: 30rpx;color: #FF3D00;">{{ qian_num(couponObj.all_price) }}</text>元/个
        </view>
      </view>
      <!-- <view class="form-item">
        <view class="form-item-left">签约人身份证号</view>
        <view class="form-item-right">
          <input type="text" v-model="sign_card" />
        </view>
      </view> -->
      <view class="sign">
        <img v-if="isChecked" @tap="checkFn" class="sign-1"
          src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/方形选中.svg" alt="">
        <img v-else @tap="checkFn" class="sign-1"
          src="https://mp-7bd569d5-2369-48a6-b477-e8c6b6ccf6ce.cdn.bspapp.com/方形未选中.svg" alt="">
        <view class="sign-2" @tap="checkFn">勾选代表您已阅读并同意</view>
        <view v-for="(item, index) in couponObj.relate_template_arr" :key="index" @tap="goXieyi(item.value)"
          class="sign-3">《{{item.label}}》 </view>
      </view>
      <view class="sign" v-if="qq.qq">注意: 如需线下签署纸质合同，请联系客服微信<text class="sign-3"
          @tap="copyTxt(qq.qq)">{{qq.qq}}</text>咨询更多详情</view>
    </view>
    <view class="submit" @tap="clickBtn">
      <view class="submit-btn" :class="{ 'pointer-none': !isChecked }" @tap="submit">兑换</view>
    </view>
    <uni-pay ref="pay" :adpid="adpid" height="70vh" logo="/static/logo.png" @success="onSuccess" @create="onCreate"
      @fail="onFail"></uni-pay>
    <uni-popup ref="popup" type="top">
      <user-login :encryptedKey="encryptedKey" :inviteCode="inviteCode"></user-login>
    </uni-popup>
    <uni-popup ref="chat" type="center">
      <view class="txt">
        <view class="txt-1">无购买权限，请联系客服微信{{qq.qq}}咨询更多</view>
        <view class="txt-2" @tap="copyTxt(qq.qq)">复制微信</view>
      </view>
    </uni-popup>
    <uni-popup ref="popup_account" type="center">
      <view class="account">
        <view class="account-top">
          <view class="account-top-title">对公转账</view>
          <view class="account-top-item">
            <view class="account-top-item-left">账户名称</view>
            <view class="account-top-item-right">{{account.account_name}}</view>
          </view>
          <view class="account-top-item">
            <view class="account-top-item-left">账户号码</view>
            <view class="account-top-item-right">{{account.account_code}}<text @tap="copyTxt(account.account_code)"
                style="color: #005ECD;margin-left: 6rpx;">复制</text></view>
          </view>
          <view class="account-top-item">
            <view class="account-top-item-left">开户银行</view>
            <view class="account-top-item-right">{{account.bank_name}}</view>
          </view>
          <view class="account-top-item">
            <view class="account-top-item-left">转账金额</view>
            <view class="account-top-item-right">{{parseFloat(couponObj.price) * parseFloat(stock)}}</view>
          </view>
          <view class="account-top-item">
            <view class="account-top-item-left">客服微信</view>
            <view class="account-top-item-right">{{qq.qq}}<text @tap="copyTxt(qq.qq)"
                style="color: #005ECD;margin-left: 6rpx;">复制</text></view>
          </view>
          <view class="account-top-item">
            <view class="account-top-item-left">转账图片</view>
            <view class="account-top-item-right">
              <view class="account-top-item-right-img" @tap="uploadFile">
                <img style="height: 150rpx;width: 150rpx;" v-if="pay_img" :src="pay_img" alt="">
                <text v-else class="account-top-item-right-img-txt">点击上传</text>
              </view>
            </view>
          </view>
          <!-- <view class="account-top-img">
            <img class="account-top-img-img" :show-menu-by-longpress="true" @tap="previewImage" :src="account.wxcode"
              alt="">
          </view>
          <view class="account-top-tip">长按添加客服联系方式，快速获取转账查询、提现查询进度情况</view> -->
        </view>
        <view class="account-bottom">
          <view class="account-bottom-left" @tap="cancel">取消</view>
          <view class="account-bottom-right" @tap="submitOrder">已兑换</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import myfn from '../../common/function/myPubFunction.js'
  import userLogin from '../../components/userlogin/userlogin.vue'
  export default {
    data() {
      return {
        isChecked: false,
        id: '',
        couponObj: {},
        userInfo: {},
        sign_card: '',
        sign_mobile: '',
        sign_name: '',
        adpid: '',
        encryptedKey: '',
        stock: '',
        account: {},
        qq: {},
        pay_img: '',
        pay_index: 0,
        pay_array: [],
        inviteCode: '',
        type: 1
      }
    },
    components: {
      userLogin
    },
    onUnload() {
      uni.$off('loginSuccess')
    },
    onLoad(options) {
      if (options.id) {
        this.id = options.id
        this.getCoupon()
      }
      if (options.type) {
        this.type = parseInt(options.type)
      }
      if (options.stock) {
        console.log(options.stock, 'options.stock---')
        this.stock = parseInt(options.stock)
      }
      if (vk.checkToken()) {
        this.getMobile()
        this.getWithdrawSet()
        this.init()
        this.userInfo = vk.getVuex('$user.userInfo')
      }
      uni.$on('loginSuccess', () => {
        vk.userCenter.getCurrentUserInfo({
          success: (data) => {
            // 成功后的逻辑
            vk.setVuex('$user.userInfo', data.userInfo)
            this.userInfo = data.userInfo
          }
        });
        this.getMobile()
        this.getWithdrawSet()
        this.$refs.popup.close()
      })
    },
    methods: {
      cancel() {
        this.$refs.popup_account.close()
        this.stock = ''
      },
      payChange(e) {
        this.pay_index = e.detail.value
      },
      previewImage(e) {
        uni.previewImage({
          // 需要预览的图片链接列表。若无需预览，可以注释urls
          urls: [e.target.src], // 为当前显示图片的链接/索引值
          current: e.target.src, // 图片指示器样式	
          indicator: 'default', // 是否可循环预览
          loop: false, // 长按图片显示操作菜单，如不填默认为保存相册// 
          longPressActions: {
            // 	itemList:[this.l('发送给朋友'),this.l]// 
          },
          success: res => {
            console.log('previewImage res', res);
          },
          fail: err => {
            console.log('previewImage err', err);
          }
        });
      },
      copyTxt(str) {
        myfn.uniCopy({
          content: str,
          success: (res) => {
            uni.showToast({
              title: '复制成功',
              icon: 'none'
            });
          },
          error: (e) => {
            uni.showToast(e);
          },
        });
      },
      getWithdrawSet() {
        let that = this
        vk.callFunction({
          url: 'user/kh/withdrawSetList',
          data: {
            // type: 2
          },
          success: (res) => {
            if (res) {
              if (res.rows.length > 0) {
                for (let i = 0; i < res.rows.length; i++) {
                  let item = res.rows[i]
                  if (item.type == 2) {
                    that.account = item
                  }
                  if (item.type == 4) {
                    that.qq = item
                  }
                }
              }
            }
          }
        })
      },
      makePhone(str) {
        uni.makePhoneCall({
          phoneNumber: str
        })
      },
      init() {
        let that = this;
        vk.userCenter.code2SessionWeixin({
          data: {
            needCache: true
          },
          success: (data) => {
            that.encryptedKey = data.encryptedKey;
          },
        });
      },
      getMobile() {
        this.userInfo = vk.getVuex('$user.userInfo')
        if (this.userInfo.mobile) {
          this.sign_mobile = this.userInfo.mobile
        }
      },
      uploadFile() {
        // 选择图片
        //前端代码
        let that = this
        uni.chooseImage({
          count: 1,
          success(res) {
            console.log(res);
            if (res.tempFilePaths.length > 0) {
              let filePath = res.tempFilePaths[0]

              // callback方式，与promise方式二选一即可
              uniCloud.uploadFile({
                filePath: filePath,
                cloudPath: new Date().getTime() + '.jpg',
                onUploadProgress: function(progressEvent) {
                  console.log(progressEvent);
                  var percentCompleted = Math.round(
                    (progressEvent.loaded * 100) / progressEvent.total
                  );
                },
                success(res) {
                  console.log(res, 'res----')
                  that.pay_img = res.fileID
                },
                fail() {},
                complete() {}
              });

            }
          },
          fail: (err) => {
            uni.showModal({
              content: JSON.stringify(err)
            })
          }
        });

      },

      async submit() {
        if (!this.userInfo._id) {
          this.$refs.popup.open()
          return
        }
        // prod
        // 必须有推荐人才可以买
        if (!this.userInfo.pid) {
          this.$refs.chat.open()
          return
        }
        if (this.pay_index == 1) {
          this.$refs.popup_account.open()
          return
        }
        if (this.pay_index == 2) {
          if (this.userInfo.balance >= parseFloat(this.couponObj.price) * parseFloat(this.stock)) {
            this.jifenPay(this.userInfo.balance - parseFloat(this.couponObj.price) * parseFloat(this.stock))
            return
          } else {
            return vk.toast('积分不足', 'none');
          }
        }
        if (!this.stock) {
          return vk.toast('请输入数量', 'none');
        }
        if (!this.sign_name) {
          return vk.toast('请输入姓名', 'none');
        }
        if (!this.sign_mobile) {
          return vk.toast('请输入电话', 'none');
        }
        // prod
        if (parseInt(this.couponObj.price) * parseInt(this.stock) >= 50000) {
          this.$refs.popup_account.open()
          return
        }
        if (this.pay_index == 0) {
          let str = 'ZHTC' // 智慧停车
          for (let i = 0; i < 3; i++) {
            str += parseInt(Math.random() * 10)
          }
          str += vk.pubfn.timeFormat(new Date(), "yyyy-MM-dd")
          await vk.callFunction({
            url: 'user/kh/contractAllget',
            success: (res) => {
              console.log(res, 'res---')
              str += (res.total + 1)
            }
          })
          // 发起支付
          this.$refs.pay.createOrder({
            provider: 'wxpay', // 支付供应商
            total_fee: this.couponObj.price * 100 * this.stock, // 支付金额，单位分 100 = 1元
            // total_fee: 1,
            order_no: str, // 业务系统订单号（即你自己业务系统的订单表的订单号）
            out_trade_no: 'WX' + str, // 插件支付单号
            description: '购买' + this.couponObj.name, // 支付描述
            type: 'recharge', // 支付回调类型
          });
        }


      },
      qian_num(str) {
        return myfn.qian_num(str)
      },
      getCoupon() {
        let that = this
        vk.callFunction({
          url: 'user/pub/couponAllget',
          data: {
            _id: that.id
          },
          success: (res) => {
            if (res) {
              that.couponObj = res.rows[0]
              if (that.couponObj.type == 2) {
                this.pay_array = [{
                    label: '微信支付',
                    value: 0
                  },
                  {
                    label: '银行转账',
                    value: 1
                  }
                ]
              }

              if (that.couponObj.type == 1) {
                this.pay_array = [{
                    label: '微信支付',
                    value: 0
                  },
                  {
                    label: '银行转账',
                    value: 1
                  },
                  {
                    label: '积分购买',
                    value: 2
                  }
                ]
              }
              if (that.couponObj.status == 2 || that.couponObj.stock == 0) {
                uni.showModal({
                  title: '提示',
                  content: '库存不足，请兑换其他优享券包',
                  showCancel: false,
                  confirmText: '确定',
                  success(res) {
                    if (res.confirm) {
                      vk.navigateBack();
                    }
                  },
                });
              }
            }
          }
        })
      },
      clickBtn() {
        if (!this.isChecked) {
          uni.showToast({
            title: '请阅读并勾选《用户服务须知》',
            icon: 'none'
          });
        }
      },
      checkFn() {
        this.isChecked = !this.isChecked
      },
      goXieyi(id) {
        uni.navigateTo({
          url: '/pages/xieyi/xieyi?id=' + id
        })
      },
      // 监听事件 - 支付订单创建成功（此时用户还未支付）
      onCreate(res) {
        console.log('create: ', res);
        // 如果只是想生成支付二维码，不需要组件自带的弹窗，则在这里可以获取到支付二维码 qr_code_image
      },
      // 银行卡支付
      async submitOrder() {
        if (!this.pay_img) {
          return vk.toast('请上传转账图片', 'none');
        }
        let that = this
        // 创建订单  锁库存
        let str = 'ZHTC' // 智慧停车
        for (let i = 0; i < 3; i++) {
          str += parseInt(Math.random() * 10)
        }
        let date = new Date()
        let time = vk.pubfn.timeFormat(date, "yyyy-MM-dd")
        str += time
        await vk.callFunction({
          url: 'user/kh/contractAllget',
          success: (res) => {
            console.log(res, 'res---')
            str += (res.total + 1)
          }
        })
        await vk.callFunction({
          url: 'user/kh/orderPost',
          title: '加载中...',
          data: {
            pay_type: '银行支付',
            pay_img: that.pay_img,
            out_trade_no: 'BANK' + str,
            computed_time: new Date(time).getTime() + 24 * 3600 * 1000,
            expire_time: vk.pubfn.timeFormat(vk.pubfn.getOffsetTime(date, {
              day: parseFloat(that.couponObj.sign_day),
              mode: "after", // after 之后 before 之前
            }), "yyyy-MM-dd"),
            effect_time: vk.pubfn.timeFormat(vk.pubfn.getOffsetTime(date, {
              day: 1,
              mode: "after", // after 之后 before 之前
            }), "yyyy-MM-dd"),
            sign_name: that.sign_name,
            sign_mobile: that.sign_mobile,
            stock: parseFloat(that.stock),
            price: parseFloat(that.couponObj.price) * parseFloat(that.stock),
            back_price: parseFloat(that.couponObj.all_price) * parseFloat(that.stock),
            coupon_id: that.id,
            per_bonus: that.couponObj.per_bonus,
            coupon_name: that.couponObj.name,
            type: that.couponObj.type,
            sign_id: that.userInfo._id,
            status: 2,
            pid: that.userInfo.pid ? that.userInfo.pid : '',
            pname: that.userInfo.pname ? that.userInfo.pname : '',
            openid: that.userInfo.wx_openid["mp-weixin"]
          }
        })
        uni.showModal({
          title: '提示',
          content: '订单已创建，等待审核;可添加审核专员微信查询进度',
          showCancel: false,
          success(res) {
            wx.requestSubscribeMessage({
              tmplIds: ['L7rMKZBNmirvpJzr_N0qEJrZUoh_vBPs8Ub2jsZKT7k'],
              complete: res => {
                uni.navigateBack()
              },
            })
          }
        })
      },
      async jifenPay(balance) {
        let that = this
        // 创建订单  锁库存
        let str = 'ZHTC' // 智慧停车
        for (let i = 0; i < 3; i++) {
          str += parseInt(Math.random() * 10)
        }
        let date = new Date()
        let time = vk.pubfn.timeFormat(date, "yyyy-MM-dd")
        str += time
        await vk.callFunction({
          url: 'user/kh/contractAllget',
          success: (res) => {
            console.log(res, 'res---')
            str += (res.total + 1)
          }
        })
        await vk.callFunction({
          url: 'user/kh/updateUser',
          title: '加载中...',
          data: {
            balance
          },
        })
        await vk.callFunction({
          url: 'user/kh/orderPost',
          data: {
            pay_type: '积分支付',
            out_trade_no: 'JIFEN' + str,
            sign_name: that.sign_name,
            sign_mobile: that.sign_mobile,
            stock: parseFloat(that.stock),
            price: parseFloat(that.couponObj.price) * parseFloat(that.stock),
            back_price: parseFloat(that.couponObj.all_price) * parseFloat(that.stock),
            coupon_id: that.id,
            per_bonus: that.couponObj.per_bonus,
            coupon_name: that.couponObj.name,
            sign_id: that.userInfo._id,
            pid: that.userInfo.pid ? that.userInfo.pid : '',
            pname: that.userInfo.pname ? that.userInfo.pname : '',
            status: 1,
          }
        })
        // 创建合同
        let contractInfo = await vk.callFunction({
          url: 'user/kh/contractPost',
          data: {
            out_trade_no: 'JIFEN' + str,
            // sign_time: time,
            expire_time: vk.pubfn.timeFormat(vk.pubfn.getOffsetTime(date, {
              day: parseFloat(that.couponObj.sign_day),
              mode: "after", // after 之后 before 之前
            }), "yyyy-MM-dd"),
            effect_time: vk.pubfn.timeFormat(vk.pubfn.getOffsetTime(date, {
              day: 1,
              mode: "after", // after 之后 before 之前
            }), "yyyy-MM-dd"),
            computed_time: new Date(time).getTime() + 24 * 3600 * 1000,
            sign_name: that.sign_name,
            sign_mobile: that.sign_mobile,
            stock: parseFloat(that.stock),
            back_price: parseFloat(that.couponObj.all_price) * parseFloat(that.stock),
            price: parseFloat(that.couponObj.price) * parseFloat(that.stock),
            coupon_id: that.id,
            per_bonus: that.couponObj.per_bonus,
            coupon_name: that.couponObj.name,
            status: 1, // 正常  2 到期  3 作废
            sign_id: that.userInfo._id,
            type: that.couponObj.type // 券包 、加油卡
          }
        })
        let obj = {
          coupon_id: that.id,
          stock: parseFloat(that.stock),
          sign_id: that.userInfo._id,
          contract_no: contractInfo.data,
          time_stamp: new Date().getTime()
        }
        if (this.userInfo.pid) {
          obj.pid = this.userInfo.pid
        }
        // 分佣  升角色
        vk.callFunction({
          url: 'user/kh/orderPostAfter',
          data: obj
        })
        uni.reLaunch({
          url: '/pages/contract/contract'
        })
      },
      // 监听事件 - 支付成功
      async onSuccess(res) {
        let that = this
        console.log('success: ', res);
        let date = new Date()
        let time = vk.pubfn.timeFormat(date, "yyyy-MM-dd")
        // 创建合同
        let contractInfo = await vk.callFunction({
          url: 'user/kh/contractPost',
          data: {
            out_trade_no: res.out_trade_no,
            // sign_time: time,
            expire_time: vk.pubfn.timeFormat(vk.pubfn.getOffsetTime(date, {
              day: parseFloat(that.couponObj.sign_day),
              mode: "after", // after 之后 before 之前
            }), "yyyy-MM-dd"),
            effect_time: vk.pubfn.timeFormat(vk.pubfn.getOffsetTime(date, {
              day: 1,
              mode: "after", // after 之后 before 之前
            }), "yyyy-MM-dd"),
            computed_time: new Date(time).getTime() + 24 * 3600 * 1000,
            sign_name: that.sign_name,
            sign_mobile: that.sign_mobile,
            // sign_card: that.sign_card,
            stock: parseFloat(that.stock),
            back_price: parseFloat(that.couponObj.all_price) * parseFloat(that.stock),
            price: parseFloat(that.couponObj.price) * parseFloat(that.stock),
            coupon_id: that.id,
            per_bonus: that.couponObj.per_bonus,
            coupon_name: that.couponObj.name,
            status: 1, // 正常  2 到期  3 作废
            sign_id: that.userInfo._id,
            type: that.couponObj.type
          }
        })
        await vk.callFunction({
          url: 'user/kh/orderPost',
          data: {
            pay_type: '微信支付',
            out_trade_no: res.out_trade_no,
            sign_name: that.sign_name,
            sign_mobile: that.sign_mobile,
            stock: parseFloat(that.stock),
            per_bonus: that.couponObj.per_bonus,
            price: parseFloat(that.couponObj.price) * parseFloat(that.stock),
            coupon_id: that.id,
            coupon_name: that.couponObj.name,
            sign_id: that.userInfo._id,
            pid: that.userInfo.pid ? that.userInfo.pid : '',
            pname: that.userInfo.pname ? that.userInfo.pname : '',
            status: 1
          }
        })
        // 券包支付
          let obj = {
            coupon_id: that.id,
            stock: parseFloat(that.stock),
            sign_id: that.userInfo._id,
            contract_no: contractInfo.data,
            time_stamp: new Date().getTime()
          }
          if (this.userInfo.pid) {
            obj.pid = this.userInfo.pid
          }
        if (this.couponObj.type == 1) {
          // 分佣  升角色
          vk.callFunction({
            url: 'user/kh/orderPostAfter',
            data: obj
          })
        }
        // 加油卡支付
        if (this.couponObj.type == 2) {
          vk.callFunction({
            url: 'user/kh/gasPostAfter',
            data: obj
          })
        }
        uni.reLaunch({
          url: '/pages/contract/contract'
        })

        if (res.user_order_success) {
          // 代表用户已付款，且你自己写的回调成功并正确执行了
        } else {
          // 代表用户已付款，但你自己写的回调执行失败（通常是因为你的回调代码有问题）

        }
      },
      onFail(err) {
        console.log('err: ', err)

      },
    }
  }
</script>

<style lang="scss">
  .account {
    background-color: #fff;
    border-radius: 8rpx;
    width: 640rpx;

    &-bottom {
      padding: 24rpx;
      border-top: 1px solid #d9d9d9;
      display: flex;
      align-items: center;
      height: 80rpx;

      &-left {
        flex: 1;
        text-align: center;
        color: #000;
        text-align: center;
        font-family: PingFang SC;
        font-size: 34rpx;
        font-style: normal;
        font-weight: 500;
        opacity: 0.9;
      }

      &-right {
        flex: 1;
        color: #576B95;
        text-align: center;
        font-family: PingFang SC;
        font-size: 34rpx;
        font-style: normal;
        font-weight: 500;
      }
    }

    &-top {
      padding: 24rpx;

      &-title {
        color: #000;
        text-align: center;
        font-family: PingFang SC;
        font-size: 34rpx;
        font-style: normal;
        font-weight: 500;
      }

      &-item {
        display: flex;
        align-items: center;
        min-height: 66rpx;

        &-left {
          color: #000;
          font-family: PingFang SC;
          font-size: 30rpx;
          font-style: normal;
          font-weight: 400;
          opacity: 0.5;
          width: 120rpx
        }

        &-right {
          flex: 1;
          color: #000;
          font-family: PingFang SC;
          font-size: 30rpx;
          font-style: normal;
          font-weight: 400;
          text-align: right;

          &-img {
            width: 150rpx;
            height: 150rpx;
            border: 1px solid #898989;
            text-align: center;
            float: right;

            &-txt {
              line-height: 150rpx;
              font-size: 24rpx;
              color: #898989;
            }
          }
        }
      }

      &-img {
        text-align: center;

        &-img {
          width: 280rpx;
          height: 280rpx;
        }
      }

      &-tip {
        color: #898989;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        margin-top: 24rpx;
      }
    }
  }

  .txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    width: 670rpx;
    height: 200rpx;
    border-radius: 16rpx;
    padding: 10rpx;

    &-1 {
      color: #000;
      font-family: PingFang SC;
      font-size: 30rpx;
      font-style: normal;
      font-weight: 400;
    }

    &-2 {
      color: #000;
      font-family: PingFang SC;
      font-size: 24rpx;
      font-style: normal;
      font-weight: 400;
      color: #005ECD;
      margin-top: 20rpx;
    }
  }

  .sign {
    height: 60rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
    margin-top: 24rpx;

    &-1 {
      width: 32rpx;
      height: 32rpx;
      margin-right: 4rpx;

      &-checked {
        background: #005ECD;
      }
    }

    &-3 {
      color: #005ECD;
    }
  }

  .form {
    padding: 32rpx;
    width: 638rpx;
    background-color: #fff;
    border-radius: 8rpx;

    &-item {
      display: flex;
      align-items: center;
      height: 88rpx;

      &-left {
        color: #5A5A5A;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        width: 218rpx;
      }

      &-right {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        color: #000;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;

        input {
          height: 100%
        }
      }
    }
  }

  .submit {
    position: fixed;
    left: 0;
    bottom: calc(var(--safe-area-inset-bottom) + 40rpx);
    width: 100%;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    &-btn {
      width: 730rpx;
      height: 74rpx;
      line-height: 74rpx;
      background-color: #005ECD;
      border-radius: 100rpx;
      text-align: center;
      color: #fff;
      font-family: PingFang SC;
      font-size: 26rpx;
      font-style: normal;
      font-weight: 500;
    }
  }

  .pointer-none {
    pointer-events: none;
  }
</style>